React Component Testing: Mastering Snapshot and Integration Tests

Šiuolaikinio žiniatinklio kūrimo pasaulyje labai svarbu užtikrinti savo vartotojo sąsajos (UI) patikimumą ir tvirtumą. „React“, populiari „JavaScript“ biblioteka, skirta vartotojo sąsajoms kurti, suteikia kūrėjams komponentais pagrįstą architektūrą. Kruopštus šių komponentų testavimas yra labai svarbus norint užtikrinti aukštos kokybės vartotojo patirtį. Šiame straipsnyje nagrinėjamos dvi esminės testavimo strategijos: momentinių nuotraukų testavimas ir integracijos testavimas, pateikiami praktiniai pavyzdžiai ir geriausios praktikos, padedančios įvaldyti „React“ komponentų testavimą.

Kodėl reikia testuoti React komponentus?

Prieš pasinerdami į momentinių nuotraukų ir integracijos testavimo ypatumus, pirmiausia supraskime, kodėl taip svarbu testuoti „React“ komponentus:

• Apsaugokite nuo regresijų: testai gali padėti aptikti netikėtus komponentų elgsenos pokyčius, užkertant kelią regresijoms įsibrauti į jūsų kodo bazę.
• Pagerinkite kodo kokybę: testų rašymas skatina jus galvoti apie komponentų dizainą ir struktūrą, todėl kodas tampa švaresnis ir lengviau prižiūrimas.
• Padidinkite pasitikėjimą: turėdami išsamų testų rinkinį, galite drąsiai atlikti kodo pakeitimus, žinodami, kad būsite įspėti, jei kas nors sugenda.
• Palengvinkite bendradarbiavimą: testai yra jūsų komponentų dokumentacija, todėl kitiems kūrėjams lengviau suprasti ir dirbti su jūsų kodu.

Momentinių nuotraukų testavimas

Kas yra momentinių nuotraukų testavimas?

Momentinių nuotraukų testavimas apima „React“ komponento atvaizdavimą ir jo išvesties (momentinės nuotraukos) palyginimą su anksčiau išsaugota momentine nuotrauka. Jei yra kokių nors skirtumų, testas nepavyksta, o tai rodo galimą problemą. Tai tarsi komponento išvesties "nuotraukos" darymas ir įsitikinimas, kad ji nesikeičia netikėtai.

Momentinių nuotraukų testavimas ypač naudingas norint patikrinti, ar jūsų vartotojo sąsaja nepasikeitė netyčia. Jis dažnai naudojamas norint aptikti stiliaus, išdėstymo ar bendros komponentų struktūros pokyčius.

Kaip įgyvendinti momentinių nuotraukų testavimą

Naudosime „Jest“, populiarų „JavaScript“ testavimo karkasą, ir „Enzyme“ (arba „React Testing Library“ – žr. toliau), kad pademonstruotume momentinių nuotraukų testavimą.

Pavyzdys su „Jest“ ir „Enzyme“ (įspėjimas apie pasenimą):

Pastaba: daugelis „Enzyme“ laiko pasenusiu ir rekomenduoja naudoti „React Testing Library“. Nors šiame pavyzdyje parodytas „Enzyme“ naudojimas, naujiems projektams rekomenduojame naudoti „React Testing Library“.

Pirmiausia įdiekite „Jest“ ir „Enzyme“:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

Pakeiskite `react-adapter-react-16` tinkamu adapteriu, skirtu jūsų „React“ versijai.

Sukurkite paprastą „React“ komponentą (pvz., Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

Dabar sukurkite momentinės nuotraukos testą (pvz., Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Paleiskite testą naudodami „Jest“:

            npm test

            

              
                Copy
              
            
          

Pirmą kartą paleidus testą, „Jest“ sukurs momentinės nuotraukos failą (pvz., __snapshots__/Greeting.test.js.snap), kuriame bus rodoma Greeting komponento išvestis.

Vėlesni testų paleidimai palygins dabartinę išvestį su išsaugota momentine nuotrauka. Jei jie atitinka, testas praeina. Jei jie skiriasi, testas nepavyksta ir turėsite peržiūrėti pakeitimus ir atnaujinti momentinę nuotrauką arba pataisyti komponentą.

Pavyzdys su „Jest“ ir „React Testing Library“:

„React Testing Library“ yra modernesnis ir rekomenduojamas požiūris į „React“ komponentų testavimą. Ji orientuota į komponento testavimą iš vartotojo perspektyvos, o ne į įgyvendinimo detales.

Pirmiausia įdiekite „Jest“ ir „React Testing Library“:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

Pakeiskite momentinės nuotraukos testą (pvz., Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

describe('Greeting Component', () => {
  it('renders correctly', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Paleiskite testą naudodami „Jest“:

            npm test

            

              
                Copy
              
            
          

Pirmą kartą paleidus testą, „Jest“ sukurs momentinės nuotraukos failą (pvz., __snapshots__/Greeting.test.js.snap), kuriame bus rodoma Greeting komponento išvestis.

Vėlesni testų paleidimai palygins dabartinę išvestį su išsaugota momentine nuotrauka. Jei jie atitinka, testas praeina. Jei jie skiriasi, testas nepavyksta ir turėsite peržiūrėti pakeitimus ir atnaujinti momentinę nuotrauką arba pataisyti komponentą.

Geriausia momentinių nuotraukų testavimo praktika

• Elkitės su momentinėmis nuotraukomis kaip su kodu: įsipareigokite savo momentinių nuotraukų failus versijų valdymo sistemai (pvz., „Git“), kaip ir bet kurį kitą kodo failą.
• Atidžiai peržiūrėkite pakeitimus: kai momentinės nuotraukos testas nepavyksta, atidžiai peržiūrėkite momentinės nuotraukos failo pakeitimus, kad nustatytumėte, ar jie yra tyčiniai, ar rodo klaidą.
• Atnaujinkite momentines nuotraukas tyčia: jei pakeitimai yra tyčiniai, atnaujinkite momentinės nuotraukos failą, kad atspindėtų naują numatomą išvestį.
• Nepiktnaudžiaukite momentinėmis nuotraukomis: momentinių nuotraukų testavimas geriausiai tinka komponentams su santykinai stabiliomis vartotojo sąsajomis. Venkite jo naudoti komponentams, kurie dažnai keičiasi, nes tai gali sukelti daug nereikalingų momentinių nuotraukų atnaujinimų.
• Apsvarstykite įskaitomumą: kartais momentinių nuotraukų failus gali būti sunku perskaityti. Naudokite tokius įrankius kaip „Prettier“, kad formatuotumėte momentinių nuotraukų failus, kad jie būtų geriau įskaitomi.

Kada naudoti momentinių nuotraukų testavimą

Momentinių nuotraukų testavimas yra efektyviausias šiais atvejais:

• Paprasti komponentai: paprastų komponentų su nuspėjamu išvedimu testavimas.
• UI bibliotekos: vartotojo sąsajos komponentų vizualinio nuoseklumo tikrinimas skirtingose versijose.
• Regresijos testavimas: netikėtų esamų komponentų pakeitimų aptikimas.

Integracijos testavimas

Kas yra integracijos testavimas?

Integracijos testavimas apima testavimą, kaip keli komponentai veikia kartu, kad pasiektų tam tikrą funkciją. Jis patikrina, ar skirtingos jūsų programos dalys sąveikauja tinkamai ir ar visa sistema veikia taip, kaip tikėtasi.

Skirtingai nuo vienetinių testų, kurie orientuojasi į atskirus komponentus atskirai, integracijos testai orientuojasi į komponentų sąveiką. Tai padeda užtikrinti, kad jūsų programa veiktų tinkamai kaip visuma.

Kaip įgyvendinti integracijos testavimą

Vėlgi, naudosime „Jest“ ir „React Testing Library“, kad pademonstruotume integracijos testavimą.

Sukurkime paprastą programą su dviem komponentais: Input ir Display. Input komponentas leidžia vartotojui įvesti tekstą, o Display komponentas rodo įvestą tekstą.

Pirmiausia sukurkite Input komponentą (pvz., Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Enter text..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

Tada sukurkite Display komponentą (pvz., Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>You entered: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

Dabar sukurkite pagrindinį App komponentą, kuris integruoja Input ir Display komponentus (pvz., App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Sukurkite integracijos testą (pvz., App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App Component', () => {
  it('updates the display when the input changes', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Enter text...');
    const displayElement = screen.getByText('You entered: ');

    fireEvent.change(inputElement, { target: { value: 'Hello, world!' } });

    expect(displayElement).toHaveTextContent('You entered: Hello, world!');
  });
});

            

              
                Copy
              
            
          

Paleiskite testą naudodami „Jest“:

            npm test

            

              
                Copy
              
            
          

Šis testas imituoja vartotoją, įvedantį tekstą į Input komponentą, ir patikrina, ar Display komponentas yra atnaujinamas su įvestu tekstu. Tai patvirtina, kad Input ir Display komponentai sąveikauja tinkamai.

Geriausia integracijos testavimo praktika

• Susikoncentruokite į pagrindinę sąveiką: nustatykite svarbiausią komponentų sąveiką ir sutelkite dėmesį į ją savo integracijos testuose.
• Naudokite realius duomenis: naudokite realius duomenis savo integracijos testuose, kad imituotumėte realaus pasaulio scenarijus.
• Imituokite išorines priklausomybes: imituokite bet kokias išorines priklausomybes (pvz., API iškvietimus), kad izoliuotumėte savo komponentus ir padarytumėte savo testus patikimesnius. Bibliotekos, tokios kaip `msw` (Mock Service Worker), puikiai tinka šiam tikslui.
• Rašykite aiškius ir glaustus testus: rašykite aiškius ir glaustus testus, kuriuos būtų lengva suprasti ir prižiūrėti.
• Testuokite vartotojų srautus: sutelkite dėmesį į visų vartotojų srautų testavimą, kad užtikrintumėte, jog jūsų programa veikia taip, kaip tikėtasi iš vartotojo perspektyvos.

Kada naudoti integracijos testavimą

Integracijos testavimas yra efektyviausias šiais atvejais:

• Sudėtingi komponentai: sudėtingų komponentų, kurie sąveikauja su kitais komponentais ar išorinėmis sistemomis, testavimas.
• Vartotojų srautai: tikrinama, ar visi vartotojų srautai veikia tinkamai.
• API sąveika: jūsų priekinės ir galinės dalių API integracijos testavimas.

Momentinių nuotraukų testavimas ir integracijos testavimas: palyginimas

Štai lentelė, apibendrinanti pagrindinius momentinių nuotraukų testavimo ir integracijos testavimo skirtumus:

Tinkamos testavimo strategijos pasirinkimas

Geriausia testavimo strategija priklauso nuo konkrečių jūsų projekto poreikių. Paprastai gera idėja naudoti momentinių nuotraukų testavimo ir integracijos testavimo derinį, kad užtikrintumėte, jog jūsų „React“ komponentai veikia tinkamai.

• Pradėkite nuo vienetinių testų: prieš pasinerdami į momentinių nuotraukų ar integracijos testus, įsitikinkite, kad turite gerus vienetinius testus savo atskiriems komponentams.
• Naudokite momentinių nuotraukų testus vartotojo sąsajos komponentams: naudokite momentinių nuotraukų testus, kad patikrintumėte vartotojo sąsajos komponentų vizualinį nuoseklumą.
• Naudokite integracijos testus sudėtingai sąveikai: naudokite integracijos testus, kad patikrintumėte, ar jūsų komponentai sąveikauja tinkamai ir ar jūsų programa veikia taip, kaip tikėtasi.
• Apsvarstykite galutinius (E2E) testus: kritiniams vartotojų srautams apsvarstykite galimybę pridėti galutinius testus naudodami tokius įrankius kaip „Cypress“ arba „Playwright“, kad imituotumėte realią vartotojo sąveiką ir patikrintumėte bendrą programos elgseną.

Daugiau nei momentinių nuotraukų ir integracijos testai

Nors momentinių nuotraukų ir integracijos testai yra labai svarbūs, jie nėra vieninteliai testų tipai, kuriuos turėtumėte apsvarstyti savo „React“ komponentams. Štai keletas kitų testavimo strategijų, kurių reikia nepamiršti:

• Vienetiniai testai: kaip minėta anksčiau, vienetiniai testai yra būtini norint testuoti atskirus komponentus atskirai.
• Galutiniai (E2E) testai: E2E testai imituoja realią vartotojo sąveiką ir patikrina bendrą programos elgseną.
• Savybėmis pagrįstas testavimas: savybėmis pagrįstas testavimas apima savybių, kurios visada turi būti teisingos jūsų komponentams, apibrėžimą ir tada atsitiktinių įvesties duomenų generavimą, kad būtų galima patikrinti tas savybes.
• Prieinamumo testavimas: prieinamumo testavimas užtikrina, kad jūsų komponentai būtų prieinami vartotojams su negalia.

Išvada

Testavimas yra neatsiejama patikimų ir patikimų „React“ programų kūrimo dalis. Įvaldę momentinių nuotraukų ir integracijos testavimo metodus, galite žymiai pagerinti savo kodo kokybę, užkirsti kelią regresijoms ir padidinti pasitikėjimą atliekant pakeitimus. Nepamirškite pasirinkti tinkamą kiekvieno komponento testavimo strategiją ir naudoti skirtingų tipų testų derinį, kad užtikrintumėte visapusišką aprėptį. Įrankių, tokių kaip „Jest“, „React Testing Library“ ir galbūt „Mock Service Worker“ (MSW), įtraukimas supaprastins jūsų testavimo darbo eigą. Visada teikite pirmenybę testų rašymui, kuris atspindėtų vartotojo patirtį. Laikydamiesi testavimo kultūros, galite kurti aukštos kokybės „React“ programas, kurios suteikia puikią vartotojo patirtį jūsų pasaulinei auditorijai.